<template>

<!--  主界面-->
<div style="background-color: #f2f2f2;position: relative;height:100%; ">


  <TitleMain  @openRightSide="openRightSide"  :userName="userName" style="position: fixed;top: 0;z-index: 1;"/>
  <div style="display: flex;margin-top: 60px;width: 100%;height:100%;background-color: #f2f2f2;">
<!--    <el-aside width="220px">-->
    <div style="position: relative;width: 231px;background-color: #f2f2f2;height: 100%" >
      <SideMenu style="position: fixed;z-index: 1;height: 100%"  />

<!--      -->
    </div>
      <router-view  @openRightSide="openRightSide"  @updateTheTitleUserName="updateTheTitleUserName"  style="height: 692px" ></router-view>
    </div>
  <el-drawer
    title="个人信息管理"
    :visible.sync="drawer"
    :direction="direction"
    size="20%"
  >
    <div class="side-user">
      <div  >

      </div>
      <div style="display: flex;justify-content: center; ">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :on-change="handleelchange"
          :before-upload="beforeAvatarUpload"
         action="">
          <el-image v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
    <div style="display: flex;flex-direction: column;justify-content: center;text-align: center;align-items: center;margin-top: 20px"  >
      <div  class="geren-box-wai-mian">
        <span class="geren-box">姓名：{{ employee.real_name }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">职位：{{ employee.position }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">部门：{{ employee.department_name }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">性别：{{ employee.sex }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">用户名：{{ employee.user_name }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">邮箱：{{ employee.email }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">工号：{{ employee.employee_id }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">注册时间：{{ employee.singup_time }}</span>
      </div>
      <div class="geren-box-wai-mian">
        <span class="geren-box">电话：{{ employee.phone }}</span>
      </div>
      <div class="geren-box-wai-mian">
          <el-button class="geren-box-button" @click="goToTheGeRenMSg">修改信息</el-button>
      </div>
    </div>
  </el-drawer>


  </div>

</template>

<script>
import {get} from "../utils/request";
import SideMenu from "../components/SideMenu";
import TitleMain from "../components/TitleMain";
import bus from "../utils/Bus";
export default {
  name: "Main",
  components:{SideMenu,TitleMain},
  data(){
      return{
        userName:'',
        drawer:false,
        direction: 'rtl',
        employee:[],
        // imageUrl: "",
        imageUrl: "https://images.unsplash.com/photo-1557718513-20c9727656bc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ",

      }
  },
  created() {

    get("/api/v1/token/test").then(resp=>{
      this.userName=resp.data
    })
    this.$router.push({name:'MainMsg'})
  },
  mounted() {

  },
  methods:{
    goToTheGeRenMSg(){
      this.drawer=false
      this.$router.push({name:"ChangePerson"})
    },
    handleelchange(file, fileList) {
      console.log(file, fileList)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    openRightSide(){
      this.drawer=true
      get('/api/v1/find/employee/msg').then(resp=>{
        this.employee=resp.data[0]
      })
    },
    updateTheTitleUserName(){
      get("/api/v1/token/test3").then(resp=>{
        localStorage.setItem("token",resp.data)
        this.updateTheTitleUserName2()
      })
    },
    updateTheTitleUserName2(){
      get("/api/v1/token/test").then(resp=>{
        this.userName=resp.data
      })
    }
  }
}
</script>

<style scoped>
.geren-box-button{
  cursor:pointer;
  border: none;
  border-radius: 5px;
  /*background: #6952f9;*/
  background:  #5FB2B2;
  color: white;
  font-size: 18px;
  padding: 12px 40px;
  font-family: "Muli", sans-serif;
}
.geren-box-wai-mian{
  margin-bottom: 10px;
}
.geren-box{
  font-size: 16px;
  font-weight: bold
}
.avatar-uploader  {
  border: 1px dashed #737272;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  line-height: 100px;text-align: center;

}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;




}
.avatar {
  width: 100px;
  height: 100px;
  max-width:100%;max-height:100%;vertical-align: middle; margin: 0 auto;
    /*overflow: hidden;*/
  /*margin-top: 10px;*/
  display: block;
}

</style>
